<template>
    <van-popup
        v-model:show="show"
        round
        style="width: 290px;">
        <slot name="title">
            <div class="title">
                {{ title }}
            </div>
        </slot>
        <slot></slot>
        <slot name="footer">
            <div
                class="footer"
                @click="closeDialog">
                关闭
            </div>
        </slot>
    </van-popup>
</template>
<script>
import { computed } from 'vue';
export default {
    props: {
        dialogShow: Boolean,
        title: String
    },
    setup (props, ctx) {
        // computed
        const show = computed(() => {
            return props.dialogShow;
        });

        const closeDialog = () => {
            ctx.emit('close');
        };

        return {
            show,
            closeDialog
        };
    }
};
</script>
<style lang="scss" scoped>
.title {
    font-size: 17px;
    text-align: center;
    border-bottom: 1px solid #f5f5f5;
    padding-top: 13px;
    padding-bottom: 13px;
}

.footer {
    font-size: 17px;
    border-top: 1px solid #f5f5f5;
    padding-top: 12px;
    padding-bottom: 12px;
    text-align: center;
}
</style>
